<!--柱状图-->
<template>
    <div class="box-size" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default{
    props:{
        XDATA:{
            type:Array,
            default:['A','B','C','D','E']
        },
        YDATA:{
            type:Array,
            default:['160','150','140','130','120']
        }
    },

    data(){
        return{

        }
    },
    mounted(){
        this.initChart(); //绘制图表
    },  
    methods:{
        initChart(){
            var myChart = echarts.init(this.$refs.chart);
            var option = {
                xAxis: {
                    show: true,
                    type: 'category',
                    data: this.XDATA,
                    "axisLine":{     //x轴坐标轴
                        "show":false,
                    },
                    axisTick: {		//x轴刻度线
                        show:false,
                        alignWithLabel: true,
                    },
                    axisLine:{
                        lineStyle:{
                            color:"white",
                        }
                    }

                },
                yAxis: {
                    type: 'value',
                    axisTick:{
                        show: false //不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, //不显示坐标轴线
                    },
                    axisLabel: {
                        show: false, //不显示坐标轴上的文字
                    },
                    splitLine: {     //网格线
                        "show": false
                    }
                    
                },
                series: [
                    {
                        data: this.YDATA,
                        type: 'bar',
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'white',
                                fontSize: 16
                            }
                        },
                        itemStyle:{
                            normal:{
                                color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#3E82F3','#5FCE61', '#5BC5FA', '#AB50DD', '#3576F2','#AA56A7', '#C56379'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                        
                    },
                    
                ]
            };
            myChart.setOption(option);
        }
    }
}
</script>
<style>

</style>